import { $ } from './jquery-module.js';
import cookie from './library/cookie.js';
$('header').load('./header_module.html');
$('footer').load('./floor_module.html');
let shop = cookie.get('shop');
let content = '',
    value = [],
    num,
    i_d;

$(function() {

    $('.logol a').append('<span>我的购物车</span>');
    $('.nav-1 .wrapper').append('<div class="rate-of"><div>');
    let clearSum,
        clearNum;
    if (shop) {
        shop = JSON.parse(shop);
        console.log(shop)
        shop.forEach((elm, i) => {
            let price = parseInt(elm.price.slice(1));
            price = (price * parseInt(elm.num)).toFixed(2);
            content = `
            <div class="shop-list">
                <label for="" class="check-box checkBox-${i}">
                    <input readonly='readonly' class="checked unit">
                </label>
                <div class="shop-main">
                    <a href="">
                        <img src="${elm.img}" alt="">
                    </a>
                    <ul>
                        <li>
                            <h3 class="p-title"><a href="">${elm.title}</a>
                            </h3>
                            <p class="p-version"><span>${elm.color}</p>
                        </li>
                        <li class="p-price"><span>${elm.price}
                        </span></li>
                        <li class="p-num"><span
                        class="pro-num1" >-</span><input type="text" name="pro_num" value="${elm.num}" min="1" max=""><span class="pro-num2">+</span>
                        </li>
                        <li class="sum-price"><span>￥${price}</span></li>
                        <li class="p-remove">
                            <span data-id="${i}">删除</span></li>
                    </ul>
                </div>
            </div>`
            $('.wrapper .shop-title').after(content);
            if (typeof elm.version == 'string') {
                $('.p-version').eq(-(i + 1)).append(`</span>&nbsp;&nbsp;<span>${elm.version}</span>`);
            }
            if (elm.install == '1') {
                $('.p-version').eq(-(i + 1)).after(`<span class="p-install">分期免息</span>`);
            }
        })
    }
    /*获取登录用户信息*/
    if (cookie.get('user')) {
        console.log($('.list:last li:first'))
        $('.list:last li:first').html(`<a href="javaScript:;">${cookie.get('user')}</a><div class="userBox">
    <section>
        <img src="../img/头像.png" alt="">
        <div>
            <p><em></em><span></span></p>
            <div>
                <a href="javascript:;"><em></em> 未实名</a><a href="javascript:;"><em></em>消息</a></div>
        </div>
    </section>
    <section>
        <dl>
            <dt><span>我的订单</span><a href="javaScript:;">更多</a></dt>
        </dl>
        <ul>
            <li><a href="javaScript:;">待付款</a></li>
            <li><a href="javaScript:;">待收货</a></li>
            <li><a href="javaScript:;">待评价</a></li>
            <li><a href="javaScript:;">退换货</a></li>
            <li><a href="javaScript:;">旧机回收</a></li>
        </ul>
    </section>
    <section>
        <a href="javaScript:;"><span>0</span><span>积分</span></a><a href="javaScript:;"><span>0</span><span>优惠券</span></a><a href="javaScript:;"><span>0.00</span><span>代金券</span></a>
    </section>
    <button>退出登录</button></div>`);
        $('.list:last li:first').addClass('drop-down users');
        /*退出登录事件*/
        $('.list:last li:first button').click(function() {
            cookie.set('user', '');
            location.href = './index.html';
        })
        $('.login-prompt').css('display', 'none');
        $('.shop-box').css('display', 'none');
        $('.shop-title').css('display', 'block');
        $('.shopping-box').css('display', 'block');
        $('.shop-list').css('display', 'block');
    } else {
        $('.list:last li:first').html(`<a href="../html/login.html">请登录</a>&nbsp;<a href="../html/reg.html">注册</a>`);
        $('.list:last li:first').removeClass('drop-down users');
        $('.login-prompt').css('display', 'block');
        $('.shop-box').css('display', 'block');
        $('.shop-title').css('display', 'none');
        $('.shopping-box').css('display', 'none');
        $('.shop-list').css('display', 'none');
    }

    /*复选框选择块 */
    $('.checked').click(function() {
        let count = 0;
        $(this).toggleClass('red-checked');
        if ($(this).hasClass('all-checked')) {
            $('.checked').not($(this)).toggleClass('red-checked');

        } else if ($(this).hasClass('unit')) {
            $('.unit').each((i, e) => {
                if ($(e).hasClass('red-checked')) {
                    count++;
                }
            })
            if (count == $('.unit').length) {
                $('.all-checked').addClass('red-checked');
            } else {
                $('.all-checked').removeClass('red-checked');
            }
        }
        counting();
    })
    counting();

    function counting() {
        clearNum = clearSum = 0;
        /*总计*/
        let checkedPrice = $('.red-checked').parents('.shop-list').find('.shop-main .sum-price');
        checkedPrice.each((i, el) => {
            clearSum += parseFloat($(el).text().slice(1));
        });
        clearSum = clearSum.toFixed(2);
        $('.clear-sum').text('￥' + clearSum);
        /*总件数*/
        $('.p-num input').each((i, e) => {
            if ($('.unit').eq(i).hasClass('red-checked')) {
                clearNum += parseInt($(e).val());
            }
        })
        $('.clear-num').text(clearNum);
    }

    /*商品购买数量*/
    setInterval(function() {
        value = [];
        $.each($('.pro-num2'), (i, elm) => {
            value.push($(elm).prev().val());
        })
        value.forEach((elm, i) => {
            if (elm != '1') {
                $('.pro-num1').eq(i).css({ 'cursor': 'pointer', 'color': 'rgb(119, 113, 113)' });
            } else {
                $('.pro-num1').eq(i).css({ 'cursor': 'not-allowed', 'color': '#ddd' });
            }
            if ($('.pro-num2').eq(i).prev().attr('max') != elm) {
                $('.pro-num2').eq(i).css({ 'cursor': 'pointer', 'color': 'rgb(119, 113, 113)' });
            } else {
                $('.pro-num2').eq(i).css({ 'cursor': 'not-allowed', 'color': '#ddd' });
            }
        })

    }, 200)
    $('.pro-num1').css('cursor', 'not-allowed');
    $('.pro-num2').click(function() {
        let _this = $(this);
        value = $(this).prev().val();
        if ($(this).prev().attr('max') != value) {
            value = parseInt(value) + 1;
            $(this).prev().val(value);

            num = $(this).prev().val();
            $('.pro-num2').each((i, e) => {
                if (e == this) {
                    i_d = -(i + 1);
                }
            })
            numChange(i_d, num, _this);
        }
    });
    $('.pro-num1').click(function() {
        let _this = $(this);
        value = $(this).next().val();
        if (value != '1') {
            value = parseInt(value) - 1;
            $(this).next().val(value);

            num = $(this).next().val();
            $('.pro-num1').each((i, e) => {
                if (e == this) {
                    i_d = -(i + 1);
                }
            })

            numChange(i_d, num, _this);
        }
    });
    /*商品删除操作 */
    $('.p-remove span').on('click', function() {
            let res = shop.filter((el, i) => i != $(this).attr('data-id'));
            cookie.set('shop', JSON.stringify(res), 1); // 将id不为被点击元素id的剩余元素从新写入cookie
            location.reload();
        })
        /*改变选择数量操作 */
    function numChange(i, num, _this) {
        shop.forEach((elm, index) => {
            if (index == (i + 2)) {
                shop[index].num = num;
                _this.parent('.p-num').next().text(`￥${(parseInt(elm.price.slice(1))*parseInt(num)).toFixed(2)}`);
            }
        })
        counting();
        cookie.set('shop', JSON.stringify(shop), 1);
    }
})